import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from './store'
import { Form, Input } from 'antd-mobile'
import FormPicker from '@/components/FormComponets/FormPicker'
import { motionCol, timerCol } from './const'
import BtnBotLayout from '@/components/BtnBotLayout'
import { useForm } from 'rc-field-form'
import { history } from 'umi'
import { useEffect } from 'react'
import { SocketContainer } from '@/hooks/useSocket'
import InputLimit from '@/components/InputLimit'

export default observer(() => {
    const store = useLocalObservable(() => Store)
    const { setQues, setSubmitInfo, formData, edit, setEdit, toggleIsOver } = store
    const [form] = useForm()
    const { send, onMessage, webSocketIns, connect, remove } = SocketContainer.useContainer()

    /** 点击生成 */
    const handleClick = () => {
        form.validateFields().then((values: any) => {
            const { name, job, school, qzyx, czfx, time, jskw } = values
            console.log(values)
            const question = `我是毕业于${school}${job}专业的${name}，请提供一个${time[0]}分钟应聘${qzyx}岗位${czfx ? `，侧重${czfx}能力` : ''}的自我介绍模板${
                jskw ? `，并以${jskw[0]}口吻介绍` : ''
            }；`
            setQues(question, values)
            /** 重新编辑是ws已被断开需要判断是否需要建立连接 */
            console.log('webSocketIns', webSocketIns(), WebSocket.OPEN)
            if (webSocketIns()?.readyState === WebSocket.OPEN) {
                send('submit', { params: { content: question } })
            } else {
                connect()
                send('submit', { params: { content: question } })
            }
        })
    }

    useEffect(() => {
        document.title = '自我介绍'
        if (edit) {
            form.setFieldsValue(formData)
            setEdit(false)
        }
        function submit({ data }: any) {
            setSubmitInfo(data)
            toggleIsOver(false)
            history.replace('/introduction/answer')
        }
        onMessage('submit', submit)
        return () => {
            remove('submit', submit)
        }
    }, [])

    return (
        <div className={styles.container}>
            <BtnBotLayout
                footer={
                    <div className={styles.blue_btn} onClick={handleClick}>
                        点击生成
                    </div>
                }
            >
                <div className={styles.tips_wrapper}>填写个人的必要基础信息，获得更加符合的自我介绍文案！</div>
                <Form className={styles.form_wrapper} form={form} initialValues={{ time: ['1'], name: '', job: '', school: '' }}>
                    <Form.Item name={'name'} label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
                        <InputLimit regExp={/^[^0-9]*$/} maxLength={25} placeholder="请输入姓名" />
                    </Form.Item>
                    <Form.Item name={'job'} label="毕业专业" rules={[{ required: true, message: '请输入毕业专业' }]}>
                        <InputLimit regExp={/^[a-zA-Z\u4e00-\u9fa5]+$/} maxLength={30} placeholder="请输入毕业专业" />
                    </Form.Item>
                    <Form.Item name={'school'} label="毕业院校" rules={[{ required: true, message: '请输入毕业院校' }]}>
                        <InputLimit regExp={/^[a-zA-Z\u4e00-\u9fa5]+$/} maxLength={30} placeholder="请输入毕业院校" />
                    </Form.Item>
                    <Form.Item name={'qzyx'} label="求职意向" rules={[{ required: true, message: '请输入求职意向' }]}>
                        <Input maxLength={30} placeholder="请输入求职意向" />
                    </Form.Item>
                    <Form.Item name={'czfx'} label="侧重方向">
                        <Input maxLength={30} placeholder="请输入侧重方向" />
                    </Form.Item>
                    <Form.Item name={'time'} label="介绍时长" rules={[{ required: true, message: '请输入介绍时长' }]} trigger="onConfirm">
                        <FormPicker placeholder="请选择介绍时长" columns={[timerCol]} />
                    </Form.Item>
                    <Form.Item name={'jskw'} label="介绍口吻" trigger="onConfirm">
                        <FormPicker placeholder="请选择介绍口吻" columns={[motionCol]} />
                    </Form.Item>
                </Form>
            </BtnBotLayout>
        </div>
    )
})
